<template>
  <el-container id="formTemplate">
    <el-aside>
      <form-tree @nodeClick="treeNodeClick" />
    </el-aside>
    <el-main>
      <div>
        <div class="clearfix mb-10">
          <el-button
            type="success"
            class="fl"
            @click="save"
            :disabled="activeTreeNode == null"
            >保存</el-button
          >
          <el-button type="danger" class="fr" @click="clear">清空</el-button>
        </div>
        <div class="mb-10">
          采集表单编号：<el-input
            type="text"
            style="width: auto"
            v-model="tableNumber"
          />
        </div>
        <form-table :data="tableList" ref="formTable" />
      </div>
    </el-main>
    <div class="layout-right">
      <form-list @nodeClick="formListClick" />
    </div>
  </el-container>
</template>
<script>
import formTree from "./formTree";
import formList from "./formList";
export default {
  name: "formTemplate",
  components: {
    formTree,
    formList,
  },
  data() {
    return {
      tableNumber: "",
      tableList: [],
      activeTreeNode: null,
    };
  },
  methods: {
    formListClick(data) {
      if (!data.children || data.children.length <= 0) {
        this.$refs.formTable.updatedData(JSON.parse(data.tableJson));
      }
    },
    treeNodeClick(data) {
      if (!data.children || data.children.length <= 0) {
        this.$refs.formTable.updatedData(JSON.parse(data.tableDataJson));
        this.activeTreeNode = data;
        this.tableNumber = data.tableNumber;
      } else {
        this.tableNumber = null;
        this.activeTreeNode = null;
      }
    },
    addRow(row) {
      this.$refs.formTable.addRow(row);
    },
    async save() {
      const tableDataJson = JSON.stringify(this.$refs.formTable.getData());
      await this.$http({
        data: {
          tableId: this.activeTreeNode.tableId,
          tableDataJson,
          tableNumber: this.tableNumber,
        },
        url: "form/table-data/saveTableData",
      });
      this.activeTreeNode.tableJson = tableJson;
      this.$message.success("保存成功");
    },
    clear() {
      this.$refs.formTable.updatedData();
    },
  },
  created() {},
};
</script>
<style lang="scss">
#formTemplate {
  padding: 10px;
  height: 100%;
  .el-aside,
  .el-main,
  .layout-right {
    overflow-y: auto;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #eee;
  }
  .el-main {
    margin: 0 10px;
  }
}
</style>